import React, { forwardRef, useImperativeHandle, useState, useMemo, useEffect } from 'react';
import { Tabs } from '@library';
import { TabItem as LibTabItem } from '@library/components/tabs/Tabs';
import useQueryControlWrap from '../../hooks/useQueryControlWrap';
import { CanvasItemProps, ControlRefProps, ActionFieldType } from './../../interface';

const tabBoxStyle: React.CSSProperties = {
  height: '48px',
  overflow: 'hidden'
};

type TabItem = LibTabItem & {
  value: string;
  labelEn: string;
  linkComponent?: any;
};

export interface TabsProps extends CanvasItemProps {
  name: string;
  tabsProps: {
    tabs: TabItem[];
  },
  onValuesChange(id: string, value: string): void;
  _id?: string;
}

export default forwardRef((props: TabsProps, ref: React.Ref<ControlRefProps>) => {
  const { tabsProps, domComplete, onValuesChange, setActionFiledMap, ...canvasProps } = props;
  const [currTabId, setCurrTabId] = useState('');


  useQueryControlWrap(canvasProps.id, '', domComplete);

  useImperativeHandle(ref, () => ({
    setData: setCurrTabId
  }));

  const tabs = useMemo(() => {
    return tabsProps.tabs.map(item => {
      return {
        ...item,
        label: (localStorage.i18nextLng === 'en' ? item?.labelEn : item?.label) || item.label,
        id: item.value
      };
    }) || [];
  }, [tabsProps.tabs]);

  useEffect(() => {
    if (!currTabId) {
      const tabid = tabsProps?.tabs?.[0].value;
      const _item: any = tabsProps.tabs?.find(ele => ele.value === tabid) || {};
      const other = tabsProps.tabs?.filter(ele => ele.value !== tabid);

      const actionFiled: any = {};
      if (other.length) {
        other.forEach(item => {
          if (item?.linkComponent) {
            item?.linkComponent.forEach((element: string) => {
              actionFiled[element] = {
                hide: true
              };
            });
          }
        });
      }
      if (_item?.linkComponent) {
        _item?.linkComponent.forEach((element: string) => {
          actionFiled[element] = {
            hide: false
          };
        });
      }

      setActionFiledMap?.((prev: any) => {
        return { ...prev, ...actionFiled };
      });
    }
  }, [currTabId, tabsProps]);

  return (
    <div {...canvasProps} className='fdTabs' style={tabBoxStyle}>
      <Tabs
        mode='tabs'
        curTabId={currTabId || tabsProps?.tabs?.[0].value || ''}
        tabs={tabs}
        onChange={(tabid: string) => {
          const _item: any = tabsProps.tabs?.find(ele => ele.value === tabid) || {};
          const other = tabsProps.tabs?.filter(ele => ele.value !== tabid);

          const actionFiled: any = {};
          if (other.length) {
            other.forEach(item => {
              if (item?.linkComponent) {
                item?.linkComponent.forEach((element: string) => {
                  actionFiled[element] = {
                    hide: true
                  };
                });
              }
            });
          }
          if (_item?.linkComponent) {
            _item?.linkComponent.forEach((element: string) => {
              actionFiled[element] = {
                hide: false
              };
            });
          }

          setActionFiledMap?.((prev: any) => {
            return { ...prev, ...actionFiled };
          });

          onValuesChange(props._id!, tabid);
        }} />
    </div>
  );
});